<template>
  <div class="login">
    <div class="login-content">
      <div class="login-item login-box">
        <i
          ><el-icon><Connection /></el-icon
        ></i>
        <p>软件平台</p>
      </div>
      <div class="login-item login-box">
        <i
          ><el-icon><MessageBox /></el-icon
        ></i>
        <p>软件平台</p>
      </div>
      <!-- 登录 -->
      <div class="login-item login-form">
        <p class="login-title">朝夕电量智能监控系统</p>
        <el-form ref="formRef" :model="formModel" :rules="rules" label-width="120px" class="demo-ruleForm" status-icon>
          <el-form-item label="用户名" prop="account">
            <el-input v-model="formModel.account" />
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="formModel.password" />
          </el-form-item>

          <el-form-item>
            <el-button type="success" @click="submitForm(formRef)"> 登录 </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="login-item login-box">
        <i
          ><el-icon><Connection /></el-icon
        ></i>
        <p>软件平台</p>
      </div>
      <div class="login-item login-box">
        <i
          ><el-icon><Connection /></el-icon
        ></i>
        <p>软件平台</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, useTemplateRef } from "vue";
import { Connection, MessageBox } from "@element-plus/icons-vue";
import { login } from "@/api/api";
import md5 from "md5";
import { useTokenManagers } from "@/utils/tokenManager";

const formRef = useTemplateRef("formRef");
const formModel = reactive({
  account: "admin",
  password: "admin@123",
});

const rules = reactive({
  account: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 18, message: "Length should be 3 to 18", trigger: "blur" },
  ],
  password: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 18, message: "Length should be 3 to 18", trigger: "blur" },
  ],
});

const { setToken } = useTokenManagers();
const submitForm = (formEl) => {
  formEl.validate(async (valid) => {
    if (valid) {
      formModel.password = md5(formModel.password);
      const resp = await login(formModel);
      console.log("🚀 ~ submitForm ~ resp:", resp);
      const {
        code,
        data: { token },
      } = resp.data;
      if (code === 2000) {
        setToken(token);
      }
    } else {
    }
  });
};
</script>

<style scoped></style>
